//---------------------------------------------------
// This function loads the parts of your skeleton 
// (navbar, footer, and other things) into html doc. 
//---------------------------------------------------
function loadSkeleton() {

    var user = JSON.parse(localStorage.getItem("loggedinUser"));
    
    if (user) {
        console.log("Currently logged in:  " + user["name"]);
        console.log($('#navbarPlaceholder').load('./text/nav_after_login.html'));
        console.log($('#footerPlaceholder').load('./text/footer.html'));
    } else {
        console.log("No one is logged in");
        console.log($('#navbarPlaceholder').load('./text/nav_before_login.html'));
        console.log($('#footerPlaceholder').load('./text/footer.html'));
    }
}
loadSkeleton(); //invoke the function
const body = document.querySelector("body");
const element = document.getElementById("g-pointer-1");
const element2 = document.getElementById("g-pointer-2");
const halfAlementWidth = element.offsetWidth / 2;
const halfAlementWidth2 = element2.offsetWidth / 2;

body.addEventListener("mousemove", (e) => {
    window.requestAnimationFrame(function () {
        setPosition(e.clientX, e.clientY);
    });
});

function setPosition(x, y) {
    window.requestAnimationFrame(function () {
        element.style.transform = `translate(${x - halfAlementWidth}px, ${
            y - halfAlementWidth
        }px)`;

        element2.style.transform = `translate(${x - halfAlementWidth2}px, ${
            y - halfAlementWidth2
        }px)`;
    });
}